<template>
  <view class="mine-container" >
    <!--顶部个人信息栏-->
    <view class="header-section">
		
      <van-card class="user-card" >
            <template #thumb>
              <view v-if="!avatar" class="cu-avatar xl round bg-white">
                <view class="iconfont icon-people text-gray icon"></view>
              </view>
              <image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix" />
            </template>
            <template #title>
              <view v-if="!name" @click="handleToLogin" class="login-tip">
                点击登录
              </view>
              <view v-if="name" class="user-info">
                <view class="u_title">
                  用户名：{{ name }}
                </view>
              </view>
            </template>
            <template #footer>
              <view @click="toInfo" class="flex align-center">
                <text>个人信息</text>
                <view class="iconfont icon-right"></view>
              </view>
            </template>
          </van-card>
    </view>
  </view>
  
  
  
   <div class="swipe-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="margin-top: 100rpx;">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt="Swipe Image" />
        </van-swipe-item>
      </van-swipe>
    </div>
  
  
   <span class="service-title">我的服务</span>
   <van-grid :gutter="10" style="margin: 20rpx;">
      <van-grid-item 
        v-for="(item, index) in items" 
        :key="index" 
        :icon="item.icon" 
        :text="item.text" 
        @click="navigateTo(item.route)"
      />
    </van-grid>
</template>

<script setup>
import { ref,	onMounted } from 'vue'
import {userStore} from '@/store'
import aa from '@/static/aa.jpg';
import bb from '@/static/bb.jpg';
import cc from '@/static/cc.jpg';

const images = ref([
  aa,
  bb,
  cc,
]);

const userEntity = userStore()

const name = ref()

const avatar = ref()

function toInfo(){
	 uni.navigateTo({
	   url: `../mine/info/index`,
	});
}
function toEdit(){
	 uni.navigateTo({
	   url: `../mine/info/edit`,
	});
}
function loginSuccess(result) {
		// 设置用户信息
		userEntity.GetInfo().then(res => {
			name.value = res.user.userName;
		})
	}

	onMounted(() => {
		loginSuccess();

	});
	
const items = ref([
  { icon: 'photo-o', text: '积分签到'},
  { icon: 'music-o', text: '积分商城'},
  { icon: 'video-o', text: '客服联系'},
  { icon: 'chat-o', text: '我的订单' ,},
  { icon: 'location-o', text: '编辑资料', route: '../mine/info/edit' },
  { icon: 'phone-o', text: '收货地址' },
  { icon: 'calendar-o', text: '福利中心'},
  { icon: 'setting-o', text: '更多服务' }
]);

const navigateTo = (route) => {
  uni.navigateTo({
    url: route
  });
};	

</script>
<style lang="scss">
	
	.user-card {
		
	  background-color: white;
	  color: black;
	  
	  border-radius: 8px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	.service-title {
	  font-size: 32rpx; /* 文字大小 */
	  font-weight: bold; /* 加粗 */
	  margin-bottom: 10px; /* 与轮播图之间的间距 */
	  margin-left: 36rpx;
	  
	}
	.swipe-container {
	  margin-left: 20px; /* 外边距 */
	  margin-right: 20px; /* 外边距 */
	  margin-top: 20rpx;
	  
	}
	
	.my-swipe .van-swipe-item {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100px; /* 根据需要调整高度 */
	  margin-bottom: 100rpx;
	}
	
	.my-swipe .van-swipe-item img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
		
		
      padding: 15px 15px 45px 15px;
       background-image: url('@/static/dd.jpg');
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
</style>